<template>
	<view>
		<view class="hexaioma">
			<text>核销码：WE343235V</text>
			<image src="../../static/image/二维码(预约详情).jpg"></image>
		</view>
		<view class="info">
			<text>维修信息</text>
			<text>维修单号：<text>3535252</text></text>
			<text>维修状态：<text>进行中</text></text>
			<text>车主姓名：<text>张三</text></text>
			<text>联系方式：<text>1993829282</text></text>
			<text>维修方式：<text>上门取车</text></text>
			<text>取车位置：<text>山阳区32号</text></text>
			<text>预约日期：<text>2022/11/10 11:00</text></text>
			<text>提交日期：<text>2022/11/08 12:34</text></text>
		</view>
		<view class="info">
			<text>车辆信息</text>
			<text>车辆类型：<text>大客车</text></text>
			<text>车牌号：<text style="margin-left: 108rpx;">豫J45323</text></text>
			<text>整车照片：</text>
			<image src="../../static/logo.png"></image>
			<text>维修部位照片：</text>
			<image src="../../static/logo.png"></image>
			<image src="../../static/logo.png"></image>
			<image src="../../static/logo.png"></image>
		</view>
		<button class="btn" @click="dialogToggle('success')">取消订单</button>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="通知" content="确认取消预约吗？"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: ''
			}
		},
		methods: {
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			dialogClose() {
				console.log('点击关闭')
			},
			dialogConfirm() {
				console.log('点击确认')
				this.messageText = `点击确认了 ${this.msgType} 窗口`
				// this.$refs.message.open()
			},
		}
	}
</script>

<style>
	.hexaioma {
		padding: 10rpx;
		/* width: 100%; */
		/* border: solid red; */
		text-align: center;
	}

	.hexaioma text {
		text-align: center;
		font-size: 35rpx;
		display: block;
	}

	.hexaioma image {
		width: 200rpx;
		height: 200rpx;
	}

	.info {
		margin-top: 10rpx;
		padding-left: 80rpx;
	}

	.info>text:nth-child(1) {
		font-weight: bold;
		font-size: 30rpx;
		margin-left: -15rpx;
	}

	.info>text {
		padding: 8rpx;
		display: block;
	}

	.info>text text {
		margin-left: 80rpx;
	}

	.info>image {
		width: 200rpx;
		height: 150rpx;
		padding-left: 25rpx;
		margin-left: -15rpx;
	}

	.btn {
		width: 220rpx;
		float: right;
		margin-right: 20rpx;
		border: #61B3FF 5rpx solid;
		color: blue;
	}
</style>